<template>
  <div class="yingmooHerader">
    <header class="header">
      <p>
        <span class="header-left">
          <font color="#FF0000" v-if="user != null">
            <span v-if="user.contentUser != null"><i class="hi">Hi,</i><i class="name">{{user.contentUser}}</i></span>
            <span v-else="user.contentEmail != null"><i class="hi">Hi,</i><i class="name">{{user.contentUser}}</i></span>
            <span v-else="user.contentMobile != null"><i class="hi">Hi,</i><i class="name">{{user.contentMobile}}</i></span>
          </font>欢迎您来鹰目
          <span v-if="!flag">
            <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymRegister'}" to="/ymRegister" class="register">请登录</router-link>
            <span class="login">
              <router-link tag="span" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>
            </span>
          </span>
          <span v-else @click="confirmExit" style="margin-right: 115px;">
             [退出]
          </span>
          <span class="merchant">商家管理中心</span>
        </span>
        <span class="member" @click="shos=1">会员中心
          <img src="../assets/ym-header/arrows.png" />
          <ul class="suspend" v-show="shos==1" @mouseleave="shos=0">
            <router-link tag="li" to="/ymMemberdefault">首页</router-link>
            <router-link tag="li" to="/ymMembershop">店铺管理</router-link>
            <router-link tag="li" to="/ymMemberorder">订单中心</router-link>
            <router-link tag="li" to="/ymMemberaccount">账户管理</router-link>
            <router-link tag="li" to="/ymMemberneedlist">需求中心</router-link>
            <router-link tag="li" to="/ymAttentionmedia">关注中心</router-link>
            <router-link tag="li" to="/ymMembererror">我的检错</router-link>
          </ul>
        </span>
        <span class="mean" @click="shos=2">我的收藏
          <img src="../assets/ym-header/arrows.png" />
        </span>
        <ul class="suspend shos2" v-show="shos==2" @mouseleave="shos=0">
          <router-link tag="li" to="/ymAttentionmedia">关注的媒体</router-link>
          <router-link tag="li" to="/ymAttentionstore">关注的店铺</router-link>
          <router-link tag="li" to="/ymAttentionactivity">关注的活动</router-link>
        </ul>
        <span class="serve" @click="shos=3">客户服务
          <img src="../assets/ym-header/arrows.png" />
        </span>
        <ul class="suspend shos3" v-show="shos==3" @mouseleave="shos=0">
          <li><a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&key=XzkzODA0MTM3Ml80ODI2NjlfNDAwNjUwNzg5M18yXw">在线QQ</a></li>
        </ul>
        <span class="tel">客服热线</span>
        <span class="num">
				<img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
      </p>
    </header>
  </div>
</template>

<script>
export default {
	data(){
		return {
			user:{},
			flag:false,
      shos: 0
		}
	},
	mounted(){
		this.getUser();
	},
	methods:{
		getUser:function(){
			var data = localStorage.getItem("user");
			if(data != null){
				this.user = JSON.parse(localStorage.getItem("user"));
				this.flag = true;
			}else{this.flag = false;}
		},
		confirmExit:function(){
			this.$confirm('确认退出登录吗？', '确认退出', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning' 
	    }).then(
	    	()=>{
	        	localStorage.removeItem("user")
						this.user = null
						this.flag = false
						window.location.reload()
	    	}
	    )
		}
	}
}
</script>

<style scoped lang="less">
.header {
  width: 100%;
  height: 45px;
  background-color: #e6e6e6;
  p {
    width: 1200px;
    margin: 0 auto;
    line-height: 45px;
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    position: relative;
    .header-left{
      width: 592px;
      display: inline-block;
      span{
        .hi{
          float: left;
        }
        .name{
          width: 80px;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
          margin-right: 10px;
        }
      }
      .register {
        margin-left: 105px;
      }

      .login {
        color: #f29600;
        margin-left: 43px;
      }

      .merchant {
        margin-right: 135px;
        padding: 0 5px 1px 5px;
        width: 99px;
        height: 22px;
        background-color: #f29600;
        color: white;
      }
    }
    .tel {
      margin-left: 93px;
      margin-right: 7px;
    }

    .tel_img {
      padding-left: 5px;
      padding-right: 5px;
    }

    .num {
      font-weight: bold;
      color: #f29600;
    }
    .suspend{
      width: 80px;
      position: absolute;
      left: 590px;
      background-color: #e6e6e6;
      padding-left: 10px;
      z-index: 999;
      li{
        line-height: 25px;
        &:hover{
          color: #f29600;
        }
        a:hover{
          color: #f29600;
          text-decoration: none;
        }
      }
    }
    .shos2{
      left: 690px;
    }
    .shos3{
      left: 790px;
    }
  }
}




.member img,
.mean img,
.serve img {
  padding-left: 5px;
}

.member,
.mean,
.serve {
  margin-right: 20px;
  display: inline-block;
  line-height: 45px;
}


</style>
